<template>
  <div style="margin:20px;padding: 10px;">
    <table>
      <tr>
        <th>资料名称</th>
        <th>下载用户</th>
        <th>最近下载时间</th>
        <th>下载次数</th>
      </tr>
      <tr v-for="item in tableData" :key="item.id" v-loading="listLoading">
        <td>{{item.name ? item.name : item.datumName }}</td>
        <td>{{item.userName}}</td>
        <!--<td>{{item.downloadTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</td>-->
        <td>{{item.downloadTime}}</td>
        <td>{{item.downloadNumber}}</td>
      </tr>
    </table>
    <div class="block text-c">
      <!--分页组件 current-page:当前页   -->
      <!--   page-sizes:每页几条数据（选项）   -->
      <!--   page-size:每页几条数据   -->
      <!--   total:总条数   -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { getDownloadList } from '@/api/datum'
  export default {
    data() {
      return {
        listLoading: false,
        currentPage: 1, // 当前页
        total: null, // 数据总条数
        listQuery: {
          page: 1,
          limit: 10
        },
        tableData: []
      }
    },
    methods: {
      getDownloadList() {
        this.listLoading = true
        getDownloadList(this.listQuery).then(res => {
          if (res.data.statusCode == 200) {
            this.tableData = res.data.data.data
            for (var i = 0; i < this.tableData.length; i++) {
              this.tableData[i].timestamp = new Date(this.tableData[i].downloadTime).getTime()
            }
            this.tableData.sort(this.sortBy('timestamp'))
            this.total = res.data.data.total
            this.listLoading = false
          }
        }).catch(err => {
          console.log('1111')
          console.log(err)
        })
      },
      handleSizeChange(val) { // 切换每页几条数据方法
        this.listQuery.limit = val
        this.getDownloadList()
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) { // 切换当前页
        this.listQuery.page = val
        this.getDownloadList()
        console.log(`当前页: ${val}`)
      },
      sortBy(field) {
        return (a, b) => {
          return b[field] - a[field]
        }
      }
    },
    mounted() {
      this.getDownloadList()
      this.total = this.tableData.length
    }
  }
</script>
<style scoped>
  a:hover {
    color: #0A76A4;
  }

  table, tr, td, th {
    // border: 1px solid #ddd;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
  }
  tr {
    border-bottom: 1px solid #d8dadd;
  }
  tr:first-of-type {
    border: none;
  }
  th {
    background: #f5fafe;
  }

  table {
    font-size: 12px;
    color: #333;
    width: 100%;
    line-height: 36px;
    margin-bottom: 20px;
  }
</style>
